<template>
  <div class="page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/profile" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">文件列表</h1>
      </div>
    </header>

    <main class="container mx-auto px-4 mt-4">
      <!-- 筛选器 -->
      <!-- <div class="bg-white rounded-xl shadow-md p-4 kb-4">
        <div class="flex items-center space-x-4">
          <div class="flex-1">
            <select v-model="selectedType" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
              <option value="">全部类型</option>
              <option value="convert">诉状转换</option>
              <option value="generate">诉状生成</option>
              <option value="defense">答辩状生成</option>
            </select>
          </div>
          <div class="flex-1">
            <select v-model="selectedDate" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
              <option value="">全部时间</option>
              <option value="today">今天</option>
              <option value="week">本周</option>
              <option value="month">本月</option>
            </select>
          </div>
        </div>
      </div> -->

      <!-- 统计信息 -->
      <!-- <div class="bg-white rounded-xl shadow-md p-4 kb-4">
        <div class="grid grid-cols-3 gap-4 text-center">
          <div>
            <p class="text-2xl font-bold text-blue-600">{{ totalCount }}</p>
            <p class="text-sm text-gray-500">总记录</p>
          </div>
          <div>
            <p class="text-2xl font-bold text-green-600">{{ todayCount }}</p>
            <p class="text-sm text-gray-500">今日使用</p>
          </div>
          <div>
            <p class="text-2xl font-bold text-purple-600">{{ weekCount }}</p>
            <p class="text-sm text-gray-500">本周使用</p>
          </div>
        </div>
      </div> -->

      <!-- 记录列表 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <!-- <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">历史记录</h2>
        </div> -->

        <div v-if="filteredRecords.length === 0" class="p-8 text-center">
          <i class="fas fa-inbox text-gray-300 text-4xl kb-4"></i>
          <p class="text-gray-500">暂无使用记录</p>
        </div>

        <div v-else class="divide-y divide-gray-100">
          <div
            v-for="record in filteredRecords"
            :key="record.id"
            class="p-4 hover:bg-gray-50"
          >
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <div class="flex items-center kb-2">
                  <div
                    class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
                    :class="getTypeColor(record.type)"
                  >
                    <i
                      :class="getTypeIcon(record.type)"
                      class="text-white text-sm"
                    ></i>
                  </div>
                  <div>
                    <h3 class="font-medium">{{ record.title }}</h3>
                    <div
                      class="flex items-center text-sm text-gray-500 space-x-4"
                    >
                      <span
                        ><i class="fas fa-clock mr-1"></i
                        >{{ formatDate(record.createdAt) }}</span
                      >
                      <span
                        ><i class="fas fa-file-alt mr-1"></i
                        >{{ record.fileSize }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 加载更多 -->
        <div v-if="hasMore" class="p-4 text-center border-t border-gray-100">
          <button @click="loadMore" class="text-blue-600 hover:text-blue-800">
            加载更多 <i class="fas fa-chevron-down ml-1"></i>
          </button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "UsageHistory",
  data() {
    return {
      selectedType: "",
      selectedDate: "",
      allRecords: [
        {
          id: 1,
          type: "convert",
          title: "民事起诉状转换",
          description: "将传统诉状转换为要素式诉状",
          createdAt: "2024-01-15 14:30:00",
          fileSize: "2.5kb",
          status: "success",
        },
        {
          id: 2,
          type: "generate",
          title: "交通事故诉状生成",
          description: "基于交通事故要素生成诉状",
          createdAt: "2024-01-14 16:20:00",
          fileSize: "1.8kb",
          status: "success",
        },
        {
          id: 3,
          type: "defense",
          title: "合同纠纷答辩状",
          description: "合同纠纷案件答辩状生成",
          createdAt: "2024-01-13 09:15:00",
          fileSize: "3.2kb",
          status: "success",
        },
        {
          id: 4,
          type: "convert",
          title: "劳动争议诉状转换",
          description: "劳动争议诉状要素化转换",
          createdAt: "2024-01-12 11:45:00",
          fileSize: "2.1kb",
          status: "failed",
        },
        {
          id: 5,
          type: "generate",
          title: "房产纠纷诉状生成",
          description: "房产纠纷要素式诉状生成",
          createdAt: "2024-01-11 15:30:00",
          fileSize: "2.8kb",
          status: "success",
        },
        {
          id: 6,
          type: "convert",
          title: "婚姻家庭诉状转换",
          description: "婚姻家庭纠纷诉状要素化转换",
          createdAt: "2024-01-10 10:20:00",
          fileSize: "2.3kb",
          status: "success",
        },
        {
          id: 7,
          type: "generate",
          title: "借贷纠纷诉状生成",
          description: "借贷纠纷要素式诉状生成",
          createdAt: "2024-01-09 14:15:00",
          fileSize: "1.9kb",
          status: "success",
        },
        {
          id: 8,
          type: "defense",
          title: "知识产权答辩状",
          description: "知识产权案件答辩状生成",
          createdAt: "2024-01-08 16:45:00",
          fileSize: "3.5kb",
          status: "success",
        },
        {
          id: 9,
          type: "convert",
          title: "医疗纠纷诉状转换",
          description: "医疗纠纷诉状要素化转换",
          createdAt: "2024-01-07 09:30:00",
          fileSize: "2.7kb",
          status: "success",
        },
        {
          id: 10,
          type: "generate",
          title: "建设工程诉状生成",
          description: "建设工程纠纷要素式诉状生成",
          createdAt: "2024-01-06 11:20:00",
          fileSize: "3.1kb",
          status: "success",
        },
        {
          id: 11,
          type: "defense",
          title: "公司纠纷答辩状",
          description: "公司纠纷案件答辩状生成",
          createdAt: "2024-01-05 13:40:00",
          fileSize: "2.9kb",
          status: "success",
        },
        {
          id: 12,
          type: "convert",
          title: "继承纠纷诉状转换",
          description: "继承纠纷诉状要素化转换",
          createdAt: "2024-01-04 15:10:00",
          fileSize: "2.4kb",
          status: "success",
        },
        {
          id: 13,
          type: "generate",
          title: "租赁纠纷诉状生成",
          description: "租赁纠纷要素式诉状生成",
          createdAt: "2024-01-03 10:25:00",
          fileSize: "2.0kb",
          status: "success",
        },
        {
          id: 14,
          type: "defense",
          title: "劳动纠纷答辩状",
          description: "劳动纠纷案件答辩状生成",
          createdAt: "2024-01-02 14:50:00",
          fileSize: "2.6kb",
          status: "success",
        },
        {
          id: 15,
          type: "convert",
          title: "侵权纠纷诉状转换",
          description: "侵权纠纷诉状要素化转换",
          createdAt: "2024-01-01 16:30:00",
          fileSize: "2.8kb",
          status: "success",
        },
      ],
      currentPage: 1,
      pageSize: 10,
      hasMore: true,
    };
  },
  computed: {
    filteredRecords() {
      let filtered = this.allRecords;

      if (this.selectedType) {
        filtered = filtered.filter(
          (record) => record.type === this.selectedType
        );
      }

      if (this.selectedDate) {
        const now = new Date();
        const today = new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate()
        );
        const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
        const monthAgo = new Date(
          today.getFullYear(),
          now.getMonth() - 1,
          now.getDate()
        );

        filtered = filtered.filter((record) => {
          const recordDate = new Date(record.createdAt);
          switch (this.selectedDate) {
            case "today":
              return recordDate >= today;
            case "week":
              return recordDate >= weekAgo;
            case "month":
              return recordDate >= monthAgo;
            default:
              return true;
          }
        });
      }

      // 分页处理
      const startIndex = 0;
      const endIndex = this.currentPage * this.pageSize;
      const paginatedRecords = filtered.slice(startIndex, endIndex);

      // 更新是否有更多数据
      this.hasMore = endIndex < filtered.length;

      return paginatedRecords;
    },
    totalCount() {
      return this.allRecords.length;
    },
    todayCount() {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      return this.allRecords.filter(
        (record) => new Date(record.createdAt) >= today
      ).length;
    },
    weekCount() {
      const weekAgo = new Date();
      weekAgo.setDate(weekAgo.getDate() - 7);
      return this.allRecords.filter(
        (record) => new Date(record.createdAt) >= weekAgo
      ).length;
    },
  },
  methods: {
    getTypeColor(type) {
      return "bg-blue-500";
    },
    getTypeIcon(type) {
      return "fas fa-file-word";
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    loadMore() {
      this.currentPage += 1;
    },
  },
};
</script>
